<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title> 
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/swiper.css" />
	<link rel="stylesheet" href="../css/newidex.css" /> 
	<style type="text/css">
		.swiper-container{
			width: 100%;
		}
	</style>
</head> 
<body class="white"> 
	<div id="refreshContainer" class="mui-content" style="width: 100%;">
		<div class=" loading" id="vueMain">
			<div id="topSwiper">  
				<div class="swiper-container">
			    		<div class="swiper-wrapper">
			    			<template v-for="item in msg.ad">
			    				<div class="swiper-slide" :data-type="item.type" :data-gid="item.goods_id" :data-url="item.url" :data-title="item.name">
			    					<img :data-src="item.photo" src="../icon/mask-big.jpg" class="maximg swiper-lazy" v-if="imgload" />
			    					<img :src="item.photo" class="maximg swiper-lazy" v-else />
			    				</div>
			    			</template>
			    		</div>  
			    		<div class="swiper-pagination"></div>
			    	</div>
			</div>
			<div class="clstype">
				<div class="box">
					<div class="mui-row"> 
						<template v-for="(item,index) in msg.classes">
							<div class="mui-col-sm-3 mui-col-xs-3 link"  _id="newList" :_title="item.name" _href="newList.html" :_extras="'type='+item.id"> 
								<img :data-lazyload="item.photo" src="../icon/mask-min.png" alt="" v-if="imgload"  />
								<img :src="item.photo" alt="" v-else  />
								<p>{{item.name}}</p>
							</div>
						</template>  
					</div>
				</div>
			</div> 
			<div class="hot-item" v-if="msg.shopad.length!=0">
				<div class="mui-content-padded">
					<div class="hot-title">公共技术服务平台</span></div>
					<div class="mui-row">
						<template v-for="item in msg.shopad">
							<div class="mui-col-xs-12 mui-col-sm-12 link" _id="terrace" _href="terrace.html" :_extras="'gid='+item.goods_id">
								<img :src="item.photo" alt="" />
							</div>
						</template>
					</div>
				</div>
			</div>
			<div class="hot-item not-border">
				<div class="mui-content-padded">
					<div class="hot-title"><span>最热场地</span></div>
					<div class="mui-row hot-place">
						<template v-for="item in msg.adone">
							<div class="mui-col-xs-6 mui-col-sm-6 opens" :data-title="item.name" :data-type="item.type"  :data-id="item.goods_id" :data-url="item.url">
								<img :data-lazyload="item.photo" src="../icon/mask-small.png" alt="" class="maximg" v-if="imgload" />
								<img :src="item.photo" alt="" class="maximg" v-else />
							</div>
						</template>
					</div>
					<template v-for="item in msg.adtwo">
						<div class="opens" :data-type="item.type" :data-title="item.name"  :data-id="item.goods_id" :data-url="item.url">
							<img :data-lazyload="item.photo" src="../icon/mask-small.png" alt="" class="maximg" v-if="imgload" />
							<img :src="item.photo" alt="" class="maximg" v-else />
						</div>  
					</template>
				</div>
			</div>
			<div class="hot-item not-border">
				<div class="mui-content-padded">
					<div class="hot-title"><span>最热设备</span></div>
					<div class="mui-clearfix hot-facility">
						<template v-for="item in msg.adthree">
							<div class="left opens" :data-type="item.type" :data-title="item.name"  :data-id="item.goods_id" :data-url="item.url">
								<img :data-lazyload="item.photo" src="../icon/mask-min2.jpg" alt="" class="maximg" v-if="imgload" />
								<img :src="item.photo" alt="" class="maximg" v-else />
							</div>
						</template>
						<div class="right">
							<template v-for="item in msg.adfour">  
								<div class="opens" :data-type="item.type" :data-title="item.name"  :data-id="item.goods_id" :data-url="item.url">
									<img :data-lazyload="item.photo" src="../icon/mask-272.png" alt="" class="maximg" v-if="imgload" />
									<img :src="item.photo" alt="" class="maximg" v-else />
								</div>
							</template>
						</div>
					</div>
				</div>
			</div>
			<div class="hot-item not-border ">
				<div class="mui-content-padded">
					<div class="hot-title"><span class="arrows"></span><span>优质演员</span></div>
					<div class="mui-clearfix hot-actor">
						<div class="swiper-container">
					    		<div class="swiper-wrapper">
					    			<template v-for="item in msg.adfive">
					    				<div class="swiper-slide opens" :data-type="item.type" :data-id="item.goods_id" :data-url="item.url" :data-title="item.name">
					    					<img :src="item.photo"  class="maximg"/>
					    				</div>
					    			</template>
					    		</div>  
					    		<div class="swiper-pagination"></div>
					    	</div>
						<div class="mui-row">
							<template v-for="item in msg.adsix">
								<div class="mui-col-xs-6 mui-col-sm-6 opens" :data-type="item.type" :data-title="item.name"  :data-id="item.goods_id" :data-url="item.url">
									<img :data-lazyload="item.photo" src="../icon/mask-min.png" alt="" class="maximg" v-if="imgload" />
									<img :src="item.photo" alt="" class="maximg" v-else />
									<p>{{item.name}}</p>
								</div>
							</template>
						</div>
					</div>
				</div>
			</div>
			<div class="hot-item not-border">
				<div class="mui-content-padded">
					<div class="hot-title"><span>最热资讯</span></div>
					<div class="hot-find">
						<div class="swiper-container">
					    		<div class="swiper-wrapper">
					    			<template v-for="item in msg.adseven">
					    				<div class="swiper-slide opens" :data-type="item.type" :data-id="item.goods_id" :data-url="item.url" :data-title="item.name">
					    					<img :src="item.photo"  class="maximg"/>
					    				</div>
					    			</template>
					    		</div>  
					    		<div class="swiper-pagination"></div>
					    	</div>
						<ul class="mui-table-view">
							<template v-for="item in msg.find_list">
							    <li class="mui-table-view-cell mui-media link" _id="findDetail" _href="findDetail.html" :_extras="'fid='+item.id" _title="发现">
							        <a href="javascript:;">
							            <img class="mui-media-object mui-pull-left" :src="item.photo" />
							            <div class="mui-media-body">
							                <div class="title">{{item.title}}</div>
							            </div>
							            <p class="nd"><span>阅读({{item.read_num}})</span><span>赞({{item.num}})</span></p>
							        </a>
							    </li>
						    </template>
						</ul>
					</div>
				</div>
			</div>
			<div class="hot-item"></div> 
			
			<!--<div class="type-item mesh">
				<div class="item-title">推荐商家</div>
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<template v-for="item in msg.shop">
							<div class="swiper-slide " :data-id="item.id" :_extras="'sid='+item.id">
								<img :data-lazyload="item.shop_logo" src="../icon/mask-small.png"  alt="" v-if="imgload"  />
								<img :src="item.shop_logo"  alt="" v-else  />
								<p class="mesh">{{item.shop_name}}</p>
							</div>
						</template>
					</div>
				</div>
			</div>
			<div class="type-item temped">
				<div class="item-title">猜您喜欢</div>
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<template v-for="item in msg.like">
							<div class="swiper-slide link" _id="detail" _href="detail.html" :_extras="'pid='+item.id" >
								<img :data-lazyload="item.img" src="../icon/mask-small.png"  alt="" v-if="imgload"  />
								<img :src="item.img"  alt="" v-else  />
								<p>{{item.name}}</p>
							</div>
						</template>
					</div>
				</div>
			</div>-->
			<template v-for="item in msg.classes">
				<div class="type-item temped">
					<div class="item-title">{{item.name}}</div>
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<template v-for="ita in item.goods">
								<div class="swiper-slide link" _id="detail" _href="detail.html" :_extras="'pid='+ita.id">
									<img :data-lazyload="ita.img" src="../icon/mask-small.png"  alt="" v-if="imgload"  />
									<img :src="ita.img"  alt="" v-else  />
									<p v-if="item.id!=3" class="metcha"><img :src="ita.logo" alt="" />{{ita.shop_name}}</p>
									<p>{{ita.name}}</p>
									<template v-if="item.id!=3&&item.id!=2">
										<p class="prices">¥ {{ita.price}}</p>
									</template>
									<template v-else>
										<p class="prices" v-if="ita.price!='0/天'">¥ {{ita.price}}</p>
										<p class="prices" v-else>询价</p>
									</template>
								</div>
							</template>
						</div>
					</div>
				</div>
			</template>
			
		</div>
	</div>
<script src="../js/mui.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/swiper.min.js"></script>
<script src="../js/mui.lazyload.js"></script>
<script src="../js/mui.lazyload.img.js"></script>
<script src="../js/bexta.js"></script> 
<script type="text/javascript">
	var apps, views;
	mui.init({
		beforeback:function(){
			plus.webview.getLaunchWebview().evalJS("mui.back()");
			return false;
		}
	});
	mui.plusReady(function () {
	    views = bexta.getWebview();
	    views.setPullToRefresh({
	    		support: true,
			height: 50 + bexta.getStorage() + 'px',
			range: '100px',
			style: 'default',
			contentdown:{
				caption:"下拉可刷新"
			},
			contentover:{
				caption:"释放刷新"
			},
			contentrefresh:{
				caption:"正在刷新"
			}
	    }, function(){
		    	bexta.ajax(api.newsite, function(res){
		   		apps.msg = res;
		   		views.endPullToRefresh();
		   },{});
	    })
	   bexta.ajax(api.newsite, function(res){
	   		initVue(res);
	   },{});
	});
	function initVue(res){
		apps = new Vue({
			el:'#vueMain',
			data:{
				imgload:true,
				msg:res
			},
			mounted:function(){
				plus.navigator.closeSplashscreen(); //启动介面
				document.querySelector('.loading').classList.add('loadRun');
				this.imgload = false;
				var self = this;
				mui.init();
//				mui.init({
//				  pullRefresh : {
//				    container:"#refreshContainer",
//				    down : {
//					      height:50,   
//					      auto: false,  
//					      contentdown : "下拉可以刷新",
//					      contentover : "释放立即刷新",
//					      contentrefresh : "正在刷新...",
//					    	callback :function(){
//					    		bexta.ajax(api.newsite, function(res){
//						   		self.msg = res;
//						   		 mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
//						   },{});
//					    	}
//				    }
//				  }
//			});
				//->头部轮播处理
				var mySwiper = new Swiper ('#topSwiper .swiper-container', { 
				    loop: true,
				    autoplay:4000,
				    pagination:'.swiper-pagination',
				    lazyLoading:true,
				    lazyLoadingInPrevNext:true,
		    			lazyLoadingOnTransitionStart:true,
				    onTap:function(swiper, event){
				    		var type = swiper.clickedSlide.getAttribute('data-type'),
					    		gid = swiper.clickedSlide.getAttribute('data-gid'),
					    		url = swiper.clickedSlide.getAttribute('data-url');
					    	if( type == 0 && gid ){
					    		//产品
					    		mui.openWindow({
					    			id:'detail',
					    			url:'detail.html',
					    			show:{autoShow:true,aniShow:'pop-in'},
									waiting:{autoShow:false},
					    			extras:{
					    				pid:gid
					    			}
					    		})
					    	}else{
					    		//外连
					    		if( url ){
					    			bexta.openWithTitle({
						    			id:'external', 
						    			url:'external.html', 
						    			show:{autoShow:true,aniShow:'pop-in'},
									waiting:{autoShow:false},
						    			extras:{
						    				ourls:url
						    			}
						    		},{
						    			title:{
						    				text:swiper.clickedSlide.getAttribute('data-title')
						    			}
						    		});
					    		}
					    		
					    	}
				    		
				    }
				});
				var topBullets = document.querySelector('#topSwiper .swiper-pagination-bullets')
				topBullets.style.marginLeft = -(topBullets.clientWidth/2)+'px';
				//->!
				new Swiper('.hot-find .swiper-container', {
					loop: true,
				    autoplay:3000,
				    pagination:'.swiper-pagination',
				    lazyLoading:false
				});
				new Swiper('.hot-actor .swiper-container', {
					loop: true,
				    autoplay:2500,
				    pagination:'.swiper-pagination',
				    lazyLoading:false
				});
				mui('body').on('tap', '.opens', function(evt){
					var type = this.getAttribute('data-type');
					if( type == 0 ){
						//内连商品详情
						var gid = this.getAttribute('data-id'); 
						if( !gid ) return ;
						mui.openWindow({
				    			id:'detail',
				    			url:'detail.html',
				    			show:{autoShow:true,aniShow:'pop-in'},
								waiting:{autoShow:false},
				    			extras:{
				    				pid:gid
				    			}
					    	});
					}else if( type == 1 ){
						//处连
						var urls = this.getAttribute('data-url'),
							name = this.getAttribute('data-title');
						if( !urls ) return ;
						bexta.openWithTitle({
				    			id:'external', 
				    			url:'external.html', 
				    			show:{autoShow:true,aniShow:'pop-in'},
							waiting:{autoShow:false},
				    			extras:{
				    				ourls:urls
				    			}
				    		},{
				    			title:{
				    				text:name
				    			}
				    		});
					}else{
						//发现详情
						var gid = this.getAttribute('data-id');
						if( !gid ) return ;
						bexta.openWithTitle({
				    			id:'findDetail',
				    			url:'findDetail.html',
				    			show:{autoShow:true,aniShow:'pop-in'},
								waiting:{autoShow:false},
				    			extras:{
				    				fid:gid
				    			}
					    	},{
					    		title:{
					    			text:"详情"
					    		}
					    	});
					}
						
				});
				
				 new Swiper('.temped .swiper-container', {
					slidesPerView: 1.5, //同时能显示多少个
					paginationClickable: false,
					spaceBetween: "3%", //右间距
					slidesOffsetBefore: 15,
					slidesOffsetAfter: 15,
					freeMode: false, //使用惯性滑动
					onTap: function(swiper, evt) {
					},
					onInit:function(){
						mui('.type-item .swiper-container').imageLazyload({
							placeholder: '../icon/mask-small.png'
						});
					},
					onSlideChangeStart:function(swipe){
						mui('.type-item .swiper-container').imageLazyload({
							placeholder: '../icon/mask-small.png'
						});
					}
				});
				new Swiper('.mesh .swiper-container', {
					slidesPerView: 3.8, //同时能显示多少个
					paginationClickable: false,
					spaceBetween: "3%", //右间距
					slidesOffsetBefore: 15,
					slidesOffsetAfter: 15,
					freeMode: false, //使用惯性滑动
					onTap: function(swiper, evt) {
						var id = swiper.clickedSlide.getAttribute('data-id');
						if( !id ){
							return false;
						}
						bexta.openWithTitle({
							id:'mHome',
							url:'mHome.html',
							extras:{
								sid:id
							}
						},{
							backgroundImage:null,
							backgroundColor:"#FFF",
							bottomBorderColor:"#FFF",
							height:44 + bexta.getStatusHeight() + 'px',
							title:{
								text:' '
							},
							back:{
								image:{
									base64Data:bexta.viewHeader.backDrakImage,
									position:{
										top: bexta.getStatusHeight()+ 10 + 'px',
										left: "10px",
										width: "13px",
										height: "24px"
									}
								}
							}
						})
						
					},
					onInit:function(){
						mui('.type-item .swiper-container').imageLazyload({
							placeholder: '../icon/mask-small.png'
						});
					},
					onSlideChangeStart:function(swipe){
//						mui('.type-item .swiper-container').imageLazyload({
//							placeholder: '../icon/mask-small.png'
//						});
					}
				});
				
				mui('.clstype ').imageLazyload({
					placeholder: '../icon/mask-min.png',
					diff:50
				});
			},
			updated:function(){
				mui('.type-item .swiper-container').imageLazyload({
					placeholder: '../icon/mask-small.png'
				});
			}
		});
		
		
	}
	
	
</script>
</body>
</html>